<script setup>
import {ref, watchEffect} from "vue";

let num = ref(0)
let sum = ref(0)
let substance = ref([])
let affair = ref('')

watchEffect(()=>{
    return affair.value
})

function add () {
    if (affair.value != '') {
        substance.value.push({id: num.value,affair:affair.value,isChecked: false})
        affair.value = ''
        num.value++
    }
}

function Checked (item) {
    item.isChecked = !item.isChecked
    if (item.isChecked) {
        sum.value++
    } else {
        sum.value--
    }
}

function del (val) {
    substance.value = substance.value.filter(item => item.id !== val.id)
    if (val.isChecked) {
        sum.value--
    }
    if (num.value > 0) {
        num.value--
    }
}


</script>

<template>
  <div class="box">
      <p>共{{num}}件事情，以完成{{sum}}件事情</p>
      <div class="add">
          <input type="text" placeholder="请输入事件" v-model="affair">
          <button @click="add">添加</button>
      </div>
      <div class="circumstanceList" v-if="num != 0" v-for="(item) in substance" :key="item.id">
          <div class="inputBox">
              <input type="checkbox" :checked="item.isChecked" @click="Checked(item)">
          </div>
          <div class="substance">
              <span v-if="item.isChecked"><del>{{item.affair}}</del></span>
              <span v-else>{{item.affair}}</span>

          </div>
          <button @click="del(item)">删除</button>
      </div>
      <div v-else class="dataNull">暂无数据</div>
  </div>
</template>

<style scoped>
* {
    margin: 0;
    padding: 0;
}
.box {
  margin: auto;
  padding: 20px;
  width: 600px;
  height: 700px;
  border: 1px solid black;
    .add {
        margin: auto;
        margin-top: 20px;
        width: 66%;
        input {
            margin-right: 20px;
            padding-left: 10px;
            width: 260px;
            height: 40px;
            font-size: 20px;
        }
        button {
            width: 88px;
            height: 43px;
        }
    }
    .circumstanceList {
        margin: auto;
        width: 90%;
        min-height: 88px;
        display: flex;
        align-items: center;
        //border: 1px solid #c9c1c1;
        button {
            width: 88px;
            height: 40px;
        }
    }
    .inputBox {
        width: 20%;
        input {
            width: 16px;
            height: 16px;
        }
    }
    .substance {
        width: 70%;
    }
    .dataNull {
        margin: auto;
        font-size: 30px;
        width: 200px;
        line-height: 500px;
    }
}
</style>